<template>
  <div class="wms-table">
    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="data"
      :columns="columns"
      :border="border"
      :stripe="stripe"
      :height="height"
      :max-height="maxHeight"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="getRowClassName"
      :cell-class-name="getCellClassName"
      :empty-text="emptyText"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblclick"
      @sort-change="handleSortChange"
      @filter-change="handleFilterChange"
    >
      <!-- 多选列 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        align="center"
        :selectable="selectableFunction"
      />

      <!-- 序号列 -->
      <el-table-column
        v-if="index"
        type="index"
        label="序号"
        width="60"
        align="center"
        :index="indexMethod"
      />

      <!-- 数据列 -->
      <template v-for="column in processedColumns" :key="column.prop">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :align="column.align || 'left'"
          :sortable="column.sortable"
          :sort-method="column.sortMethod"
          :sort-by="column.sortBy"
          :sort-orders="column.sortOrders"
          :resizable="column.resizable"
          :show-overflow-tooltip="column.showOverflowTooltip !== false"
          :class-name="column.className"
          :label-class-name="column.labelClassName"
        >
          <!-- 自定义表头 -->
          <template v-if="column.headerSlot" #header="scope">
            <slot :name="column.headerSlot" v-bind="scope" />
          </template>

          <!-- 自定义内容 -->
          <template #default="scope">
            <!-- 使用插槽 -->
            <slot
              v-if="column.slot"
              :name="column.slot"
              v-bind="{ ...scope, column }"
            />

            <!-- 格式化显示 -->
            <span v-else-if="column.formatter">
              {{
                column.formatter(
                  scope.row,
                  scope.column,
                  scope.row[column.prop],
                  scope.$index,
                )
              }}
            </span>

            <!-- 字典标签 -->
            <wms-status-tag
              v-else-if="column.dictType"
              :type="column.dictType"
              :value="scope.row[column.prop]"
            />

            <!-- 默认显示 -->
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
      </template>

      <!-- 操作列 -->
      <el-table-column
        v-if="actions && actions.length > 0"
        label="操作"
        :width="actionsWidth"
        :fixed="actionsFixed"
        align="center"
        class-name="wms-table__actions"
      >
        <template #default="scope">
          <wms-action-buttons
            :actions="actions"
            :row="scope.row"
            :index="scope.$index"
            @action="handleAction"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <wms-pagination
      v-if="pagination"
      :total="total"
      :page="currentPage"
      :limit="pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import type { ElTable } from "element-plus";

/**
 * 表格列配置接口
 */
interface WmsTableColumn {
  /** 列属性名 */
  prop: string;
  /** 列标题 */
  label: string;
  /** 列宽度 */
  width?: string | number;
  /** 最小列宽 */
  minWidth?: string | number;
  /** 列固定 */
  fixed?: boolean | "left" | "right";
  /** 对齐方式 */
  align?: "left" | "center" | "right";
  /** 是否排序 */
  sortable?: boolean | "custom";
  /** 排序方法 */
  sortMethod?: (a: any, b: any) => number;
  /** 排序字段 */
  sortBy?: string | string[] | ((row: any, index: number) => string);
  /** 排序顺序 */
  sortOrders?: ("ascending" | "descending")[];
  /** 是否可调整列宽 */
  resizable?: boolean;
  /** 是否显示溢出提示 */
  showOverflowTooltip?: boolean;
  /** 列样式类名 */
  className?: string;
  /** 表头样式类名 */
  labelClassName?: string;
  /** 格式化函数 */
  formatter?: (row: any, column: any, cellValue: any, index: number) => string;
  /** 自定义插槽名称 */
  slot?: string;
  /** 表头插槽名称 */
  headerSlot?: string;
  /** 字典类型 */
  dictType?: string;
}

/**
 * 操作按钮配置接口
 */
interface WmsTableAction {
  /** 操作类型 */
  type: string;
  /** 按钮文本 */
  label: string;
  /** 按钮类型 */
  buttonType?: "primary" | "success" | "warning" | "danger" | "info" | "text";
  /** 图标 */
  icon?: string;
  /** 是否显示 */
  show?: (row: any, index: number) => boolean;
  /** 是否禁用 */
  disabled?: (row: any, index: number) => boolean;
  /** 权限标识 */
  permission?: string;
}

/**
 * 分页配置接口
 */
interface WmsPaginationConfig {
  /** 当前页码 */
  page: number;
  /** 每页条数 */
  limit: number;
}

/**
 * WMS表格组件属性接口
 */
interface WmsTableProps {
  /** 表格数据 */
  data: any[];
  /** 列配置 */
  columns: WmsTableColumn[];
  /** 加载状态 */
  loading?: boolean;
  /** 是否显示边框 */
  border?: boolean;
  /** 是否显示斑马纹 */
  stripe?: boolean;
  /** 表格高度 */
  height?: string | number;
  /** 表格最大高度 */
  maxHeight?: string | number;
  /** 是否显示表头 */
  showHeader?: boolean;
  /** 是否高亮当前行 */
  highlightCurrentRow?: boolean;
  /** 是否支持多选 */
  selection?: boolean;
  /** 是否显示序号 */
  index?: boolean;
  /** 空数据提示文本 */
  emptyText?: string;
  /** 操作按钮配置 */
  actions?: WmsTableAction[];
  /** 操作列宽度 */
  actionsWidth?: string | number;
  /** 操作列固定 */
  actionsFixed?: boolean | "left" | "right";
  /** 是否显示分页 */
  pagination?: boolean;
  /** 总记录数 */
  total?: number;
  /** 当前页码 */
  page?: number;
  /** 每页条数 */
  limit?: number;
}

/**
 * WMS表格组件事件接口
 */
interface WmsTableEmits {
  /** 选择变化事件 */
  "selection-change": [selection: any[]];
  /** 当前行变化事件 */
  "current-change": [currentRow: any | null, oldCurrentRow: any | null];
  /** 行点击事件 */
  "row-click": [row: any, column: any, event: Event];
  /** 行双击事件 */
  "row-dblclick": [row: any, column: any, event: Event];
  /** 排序变化事件 */
  "sort-change": [params: { column: any; prop: string; order: string | null }];
  /** 筛选变化事件 */
  "filter-change": [filters: Record<string, any>];
  /** 操作按钮点击事件 */
  action: [type: string, row: any, index: number];
  /** 分页变化事件 */
  pagination: [params: WmsPaginationConfig];
}

// 组件属性定义
const props = withDefaults(defineProps<WmsTableProps>(), {
  loading: false,
  border: true,
  stripe: true,
  showHeader: true,
  highlightCurrentRow: false,
  selection: false,
  index: false,
  emptyText: "暂无数据",
  actionsWidth: 200,
  actionsFixed: "right",
  pagination: true,
  total: 0,
  page: 1,
  limit: 20,
});

// 组件事件定义
const emit = defineEmits<WmsTableEmits>();

// 表格引用
const tableRef = ref<InstanceType<typeof ElTable>>();

// 当前页码
const currentPage = computed(() => props.page);

// 每页条数
const pageSize = computed(() => props.limit);

// 处理后的列配置
const processedColumns = computed(() => {
  return props.columns.filter((column) => column.prop && column.label);
});

/**
 * 获取行样式类名
 */
function getRowClassName({
  row,
  _rowIndex,
}: {
  row: any;
  rowIndex: number;
}): string {
  let className = "wms-table__row";

  // 添加行状态样式
  if (row.disabled) {
    className += " wms-table__row--disabled";
  }

  if (row.highlighted) {
    className += " wms-table__row--highlighted";
  }

  return className;
}

/**
 * 获取单元格样式类名
 */
function getCellClassName({
  _row,
  column,
  _rowIndex,
  _columnIndex,
}: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}): string {
  let className = "wms-table__cell";

  // 添加列对齐样式
  if (column.align) {
    className += ` wms-table__cell--${column.align}`;
  }

  return className;
}

/**
 * 选择项判断函数
 */
function selectableFunction(row: any, index: number): boolean {
  return !row.disabled;
}

/**
 * 序号计算方法
 */
function indexMethod(index: number): number {
  return (currentPage.value - 1) * pageSize.value + index + 1;
}

/**
 * 选择变化处理
 */
function handleSelectionChange(selection: any[]): void {
  emit("selection-change", selection);
}

/**
 * 当前行变化处理
 */
function handleCurrentChange(
  currentRow: any | null,
  oldCurrentRow: any | null,
): void {
  emit("current-change", currentRow, oldCurrentRow);
}

/**
 * 行点击处理
 */
function handleRowClick(row: any, column: any, event: Event): void {
  emit("row-click", row, column, event);
}

/**
 * 行双击处理
 */
function handleRowDblclick(row: any, column: any, event: Event): void {
  emit("row-dblclick", row, column, event);
}

/**
 * 排序变化处理
 */
function handleSortChange(params: {
  column: any;
  prop: string;
  order: string | null;
}): void {
  emit("sort-change", params);
}

/**
 * 筛选变化处理
 */
function handleFilterChange(filters: Record<string, any>): void {
  emit("filter-change", filters);
}

/**
 * 操作按钮点击处理
 */
function handleAction(type: string, row: any, index: number): void {
  emit("action", type, row, index);
}

/**
 * 分页变化处理
 */
function handlePagination(params: WmsPaginationConfig): void {
  emit("pagination", params);
}

/**
 * 清空选择
 */
function clearSelection(): void {
  tableRef.value?.clearSelection();
}

/**
 * 切换行选择状态
 */
function toggleRowSelection(row: any, selected?: boolean): void {
  tableRef.value?.toggleRowSelection(row, selected);
}

/**
 * 设置当前行
 */
function setCurrentRow(row: any): void {
  tableRef.value?.setCurrentRow(row);
}

/**
 * 刷新表格布局
 */
function doLayout(): void {
  nextTick(() => {
    tableRef.value?.doLayout();
  });
}

// 暴露方法给父组件
defineExpose({
  clearSelection,
  toggleRowSelection,
  setCurrentRow,
  doLayout,
  tableRef,
});
</script>

<style scoped lang="scss">
.wms-table {
  width: 100%;

  // 表格行样式
  :deep(.wms-table__row) {
    &--disabled {
      opacity: 0.5;
      background-color: var(--wms-bg-disabled);

      .el-table__cell {
        color: var(--wms-text-color-disabled);
      }
    }

    &--highlighted {
      background-color: var(--wms-warning-color-light);
    }
  }

  // 表格单元格样式
  :deep(.wms-table__cell) {
    &--center {
      text-align: center;
    }

    &--right {
      text-align: right;
    }
  }

  // 操作列样式
  :deep(.wms-table__actions) {
    .el-button {
      margin: 0 2px;
      padding: 4px 8px;
      font-size: 12px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  // Element Plus表格样式定制
  :deep(.el-table) {
    font-size: var(--wms-font-size-md);

    .el-table__header-wrapper {
      .el-table__header {
        th {
          background-color: var(--wms-bg-secondary);
          color: var(--wms-text-color-primary);
          font-weight: 600;
          border-bottom: 2px solid var(--wms-border-color);
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__body {
        tr {
          &:hover {
            background-color: var(--wms-primary-color-light);
          }
        }

        td {
          border-bottom: 1px solid var(--wms-border-color-lighter);
        }
      }
    }

    .el-table__empty-block {
      .el-table__empty-text {
        color: var(--wms-text-color-placeholder);
      }
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    :deep(.el-table) {
      font-size: var(--wms-font-size-sm);

      .el-table__cell {
        padding: 8px 4px;
      }
    }
  }
}
</style>
